<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>

		<div id="aaa">
			{{counta}}
			<button @click="counta+=1">外部按钮</button>
			<cabb :count="counta" @aaaa="ccount($event)"></cabb>
			
			<input v-model="firstName" /> <br>
			<input v-model="lastName"/> <br>
			<input v-model="fullName" />
		</div>

	</body>

	<script>
		Vue.component("cabb", {
			props: ["count"],
			data: function() {
				return {

				}
			},
			methods: {
				changecount: function() {
					this.count = this.count * 1 + 2;
					this.$emit("aaaa",[this.count,45] )
				}
			},
			template: "<button @click='changecount'>内部按钮{{count}}</button>"
		})

		new Vue({
			el: "#aaa",
			data:{
				counta:1,
				firstName:"",
				lastName:""
			},
			methods:{
				ccount:function(data){
					this.counta = data[0]
				}
			},
			computed:{
				fullName:function(){
					return this.firstName + this.lastName
				}
			},
			watch:{
				firstName:function(val){
					if(val.length > 10){
						this.firstName = val.substring(0,10);
					}
				}
			}
		})
	</script>

</html>